
<template>
  <div id="app">
    <song-list-page :class="{hasPadding: showPlayer}"></song-list-page>
    <Player v-if="showPlayer"/>
  </div>
</template>
<script>
import SongListPage from "./SongListPage";
import Player from "./player/index";
import {mapState} from 'vuex'
export default {
  components: {
    SongListPage,
    Player,
  },
  computed: {
    ...mapState({
      showPlayer: state => state.Player.currentIndex >= 0
    })
  }
};
</script>
<style>
@keyframes roate{
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}
* {
  margin: 0;
  padding: 0;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
}
.hasPadding {
  padding-bottom: 60px;
}
</style>